import React, {useState} from 'react';
import {Button, Card, Col, Divider, Form, Input, message, Row, Select, Space, Spin, Upload} from "antd";
import TextArea from "antd/es/input/TextArea";
import {UploadOutlined} from "@ant-design/icons";
import {genChatByAiAsyncUsingPost, genChatByAiUsingPost} from "@/services/xinghuobi/chartController";
import {useForm} from "antd/es/form/Form";


/*
*添加图表异步
 */

const AddChartAsync: React.FC = () => {
  const [form, setForm] = useForm();
  const [submitting, setSubmitting] = useState<boolean>(false);


  const onFinish = async (values: any) => {
    //避免重复提交
    if (submitting) {
      return
    }
    setSubmitting(true)
    //对接后端，上传数据
    const params = {
      ...values,
      file: undefined
    }
    try{
      const res = await genChatByAiAsyncUsingPost(params, {}, values.file.file.originFileObj)
      if (!res.data) {
        message.error("分析失败")
      } else {
        message.success("分析任务提交成功，稍后请在我的图表查看")
        form.resetFields();
      }

    } catch (e: any) {
      message.error("分析失败" + e.message)
    }
    setSubmitting(false)

  };

  return (
    <div className="add-chart-async">

          <Card title={"智能分析"}>
            <Form
              form={form}
              name="addChart"
              onFinish={onFinish}
              initialValues={{ }}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              labelAlign={"left"}
            >

              <Form.Item name="goal" label="分析目标" rules={[{ required: true, message: '请输入分析目标' }]}>
                <TextArea placeholder="请入你的分析诉求，比如：分析网站用户的增长情况"/>
              </Form.Item>
              <Form.Item name="name" label="图标名称">
                <Input placeholder="请入图标名称"/>
              </Form.Item>
              <Form.Item
                name="chartType"
                label="图标类型"
              >
                <Select options={[
                  { value: '基础平滑折线图', label: '折线图' },
                  { value: '基础柱状图', label: '柱状图' },
                  { value: '环形饼图', label: '饼图'},
                  { value: '基础散点图', label: '散点图'},
                  { value: '基础面积图', label: '面积图'},
                ]}>
                </Select>
              </Form.Item>

              <Form.Item
                name="file"
                label="原始数据"
              >
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传csv文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 16, offset: 4 }}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                    智能分析
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>

  </div>
  );
};
export default AddChartAsync;
